<template>
  <div>
    <h1>新用户注册</h1>
    <form>
      用户名：<input type="text" v-model="newUser.name" @blur="checkName()"><span>{{ spanInfo.name }}</span><br>

      用户密码：<input type="text" v-model="newUser.pwd" @blur="checkAll()"> <span>{{ spanInfo.pwd }}</span><br>

      密码确认：<input type="text" v-model="newUser.sure" @blur="checkAll()"> <span>{{ spanInfo.sure }}</span><br>

      用户邮件：<input type="text" v-model="newUser.email" @blur="checkAll()"> <span>{{ spanInfo.email }}</span><br>

      用户头像：<input type="radio" v-model="newUser.head" value="star01.jpg" checked name="head">
      <img src="/project/img/star01.jpg" width="168px" height="168px">
      <input type="radio" v-model="newUser.head" value="star02.jpg" name="head">
      <img src="/project/img/star02.jpg" width="168px" height="168px">
      <input type="radio" v-model="newUser.head" value="star03.jpg" name="head">
      <img src="/project/img/star03.jpg" width="168px" height="168px">
      <input type="radio" v-model="newUser.head" value="star04.jpg" name="head">
      <img src="/project/img/star04.jpg" width="168px" height="168px">
      <input type="radio" v-model="newUser.head" value="star05.jpg" name="head">
      <img src="/project/img/star05.jpg" width="168px" height="168px">
      <input type="radio" v-model="newUser.head" value="star06.jpg" name="head">
      <img src="/project/img/star06.jpg" width="168px" height="168px"><br>

      <input type="button" value="注册" @click="register()">
      <input type="button" value="重置" @click="reset()"><br>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      newUser: {},
      spanInfo: {},
    }
  },
  methods: {
    checkName() {
      axios.get("/project/user/findByName", {
        params: {
          name: this.newUser.name
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.spanInfo.name = "通过"
        } else {
          this.spanInfo.name = "该用户名已注册，请换一个吧！"
        }
      })
    },
    checkAll() {
      let rex1 = /^.{1,10}$/;
      let rex2 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (rex1.test(this.newUser.pwd)) {
        this.spanInfo.pwd = "通过";
      } else {
        this.spanInfo.pwd = "请输入1-10个字符";
      }

      if (this.newUser.pwd == this.newUser.sure) {
        this.spanInfo.sure = "通过";
      } else {
        this.spanInfo.sure = "密码不一致";
      }

      if (rex2.test(this.newUser.email)) {
        this.spanInfo.email = "通过";
      } else {
        this.spanInfo.email = "邮箱格式不正确";
      }
    },
    register() {
      if (this.spanInfo.name == "通过" && this.spanInfo.pwd == "通过" && this.spanInfo.sure == "通过" && this.spanInfo.email == "通过") {
        axios.get("/project/user/add", {
          params: this.newUser
        }).then(resp => {
          if (resp.data == "ok") {
            this.$router.push({name:"Login"})
          }
        })
      }
    },
    reset() {
      this.newUser = {};
      this.spanInfo = {};
    },
  }
}

</script>

<style scoped>

</style>